import React from 'react';
import { useLocation } from 'react-router-dom';
import './DataArchive.css';

const DataArchive: React.FC = () => {
  const location = useLocation();
  
  // 根据路径显示不同的内容
  const renderContent = () => {
    if (location.pathname === '/data-archive/management') {
      return (
        <div className="archive-content">
          <h2>数据管理</h2>
          <div className="data-grid">
            <div className="data-card">
              <h3>数据文件一</h3>
              <p>文件大小: 1.2GB</p>
              <p>最后修改: 2024-09-03</p>
              <div className="card-actions">
                <button className="action-btn">查看</button>
                <button className="action-btn">编辑</button>
                <button className="action-btn danger">删除</button>
              </div>
            </div>
            <div className="data-card">
              <h3>数据文件二</h3>
              <p>文件大小: 0.8GB</p>
              <p>最后修改: 2024-09-02</p>
              <div className="card-actions">
                <button className="action-btn">查看</button>
                <button className="action-btn">编辑</button>
                <button className="action-btn danger">删除</button>
              </div>
            </div>
            <div className="data-card">
              <h3>数据文件三</h3>
              <p>文件大小: 2.4GB</p>
              <p>最后修改: 2024-09-01</p>
              <div className="card-actions">
                <button className="action-btn">查看</button>
                <button className="action-btn">编辑</button>
                <button className="action-btn danger">删除</button>
              </div>
            </div>
          </div>
        </div>
      );
    } else if (location.pathname === '/data-archive/backup') {
      return (
        <div className="archive-content">
          <h2>数据备份</h2>
          <p>这里是数据备份模块，您可以在这里进行数据备份相关操作。</p>
        </div>
      );
    } else if (location.pathname === '/data-archive/transmit') {
      return (
        <div className="archive-content">
          <h2>数据推送</h2>
          <p>这里是数据推送模块，您可以在这里进行数据推送相关操作。</p>
        </div>
      );
    } else {
      return (
        <div className="archive-content">
          <h2>数据归档</h2>
          <p>请从上方菜单选择您想要访问的数据归档功能。</p>
          <p>您可以点击"数据归档"查看下拉菜单中的选项。</p>
        </div>
      );
    }
  };

  return (
    <div className="data-archive-container">
      {renderContent()}
    </div>
  );
};

export default DataArchive; 